<template>
    <div class="white-module module">

      <div class="title"><span></span>赛事报名</div>
      <div class="info">
        <div class="item">
         <div class="o"> <span>赛事</span>{{matchInfo.match_name}}</div><span class="last">比赛时间</span>{{matchInfo.matchdate}}
        </div>
        <div class="item">
          <div class="o">  <span>领队</span>{{teaminfo.real_name}}</div><span class="last"
            >报名时间</span
          >{{matchInfo.signdate}}
        </div>


      </div>

      <div class="title"><span></span>赛项选择</div>
      <div class="c" >
        <div class ="matchType" v-for="(itemMatch,index) in matchTypeList" :key="index">
          <div>
            {{itemMatch.name}}:
          </div>
          <div class="c">
            <div class="item" v-for="(item) in itemMatch.items">
              <div class="title">{{item.item_name}}</div>
              <div class="btn" @click="handleEnroll(item.item_type==100201?1:2,item.id)">赛事报名</div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </template>

<script lang="ts" >
import {defineComponent, reactive, ref, toRefs} from "vue";
import router from "@/router";
import listService from "@/utils/listService";
import baseService from "@/utils/baseService";
import {getCache} from "@/utils/cache";



export default defineComponent({
  setup() {


    const state = reactive({
      getDataListURL: "/front/fast/match/match/page?pageSize=10&name=小鸟飞飞",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        orderId: "",
        status: "",
        name: ""
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },mounted(){
   // alert(this.$route.query.id);
    this.id=this.$route.query.id ;
    this.queryInfo();
    const teamId =getCache("CacheToken",{ isSessionStorage: true }, {})["teamId"];

    this.queryTeamInfo(teamId);
  },

  data() {
    return {
      id : null as any,
      isCollapse:1,
      teaminfo:{
        real_name: "",
        team_name: ""
      },
      matchInfo:{
        match_name:'',
        signdate:'',
        begindate:'',
        detail:[{classname:''}],
        matchdate: ''
      },//赛事分类
      matchTypeList:[] as any,
      dialogVisible:false,
      isNavCollapse:false,
      showDialogFlag: false,
      evaluationDialogFlag: false,
      updateForm: {
        id: null,
        schoolName: '',
        evaluation: ''
      },
      formLabelWidth: '120px',
    };
  },

  methods: {
    handleEnroll(index: number,id:string) {
      if (index == 1) {
        router.push("/enroll/individualEnroll?id="+id+"&matchId="+this.id);
      } else {
        router.push("/enroll/groupEnroll?id="+id+"&matchId="+this.id);
      }
    },
    queryInfo() {
      const userInfo = getCache("userInfo", {isSessionStorage: true}, {});
      if (!(userInfo && userInfo.team)) {
        return;
      }
      baseService.get('/front/fast/match/matchInfo/info?id=' + this.id + '&city=' + userInfo.team.city).then(e => {
        this.matchInfo = e.data;
        let matchTypeList = [];
        //去掉排序，按照后台返回的数据进行排序
        //this.matchInfo.detail.sort((a,b)=>a.classname.localeCompare(b.classname, 'zh-Hans-CN'))
        let itemClass = '';
        let currentClass: any = null;
        this.matchInfo.detail.forEach((e) => {
          if (e.classname !== itemClass) {
            if (currentClass) {
              matchTypeList.push(currentClass);
            }
            itemClass = e.classname;
            currentClass = {name: itemClass, items: []};
          }
          currentClass.items.push(e);
        })
        matchTypeList.push(currentClass);
        this.matchTypeList = matchTypeList;
      })
    }
    //查询赛项信息
    ,queryTeamInfo(id:string){
      baseService.get("/front/fast/user/team/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.teaminfo = e.data;
        }
      });
    }


  }
});
</script>

<style lang="scss" scoped>
.module {
    padding: 20px 0px 50px;
    margin-bottom: 12px;
    position: relative;

    .title {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: $font-weight-bold;
        padding: 0px 24px;

        span {
            width: 4px;
            height: 12px;
            background: #00a0e9;
            margin-right: 7px;
        }
    }


    .info {
        margin-bottom: 34px;

        .item {
            display: flex;
            align-items: center;
            margin-top: 14px;
            color: #4f5a70;

            .o {
                width: 400px;
                display: flex;
            }

            span {
                width: 78px;
                margin-left: 35px;
                text-align: right;
                margin-right: 20px;
            }
        }
    }

    .c {
        display: flex;
        flex-wrap: wrap;
        //justify-content: space-between;
        padding: 0px 20px;
        margin-top: 16px;
        width: 1070px;

        .item {
            width: 24%;
            margin-bottom: 16px;
            height: 118px;
            background: #F5F7FA;
            border-radius: 8px;
            text-align: center;
            margin-right: 20px;
            .title {
                font-size: 16px;
                font-weight: $font-weight-bold;
                padding: 20px 0px 24px;
                text-align: center;
                justify-content: center;
            }

            .btn {
                width: 98px;
                text-align: center;
                line-height: 32px;
                background: #FFFFFF;
                border-radius: 6px;
                color: $color-primary;
                border: 1px solid rgba(0, 160, 233, 0.28);
                margin: auto;
                cursor: pointer;
            }

            .btn:hover {
                background: $color-primary;
                color: #FFFFFF;
            }
        }
    }

}
</style>
